<template>
  <div class="questions-new">
    <el-card>
      <!-- 头部 -->
      <div slot="header" class="clearfix">
        <span>{{ $route.query.id ? '试题修改' : '试题录入' }}</span>
      </div>
      <!-- /头部 -->

      <!-- 表单区域 -->
      <el-form :model="queryParams" :rules="newFormRules" ref="newFormRef" label-width="120px">
        <!-- 学科 -->
        <el-form-item label="学科：" prop="subjectID">
          <el-select v-model="queryParams.subjectID" placeholder="请选择" @change="subjectChanged">
            <el-option
              :label="item.label"
              :value="item.value"
              :key="index"
              v-for="(item, index) in subjectsOpt"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 目录 -->
        <el-form-item label="目录：" prop="catalogID">
          <el-select v-model="queryParams.catalogID" placeholder="请选择">
            <el-option
              :label="item.label"
              :value="item.value"
              :key="index"
              v-for="(item, index) in directorysOpt"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 企业 -->
        <el-form-item label="企业：" prop="enterpriseID">
          <el-select v-model="queryParams.enterpriseID" placeholder="请选择">
            <el-option
              :label="item.shortName"
              :value="item.id"
              :key="index"
              v-for="(item, index) in companysOpt"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 城市 -->
        <el-form-item label="城市：" class="city" prop="city">
          <!-- 城市 -->
          <el-select
            class="city-opt"
            v-model="queryParams.province"
            placeholder="请选择"
            style="width: 196px; margin-right: 8px;"
            @change="onProvincesChanged"
          >
            <el-option
              :label="item"
              :value="item"
              :key="index"
              v-for="(item, index) in provincesOpt"
            ></el-option>
          </el-select>

          <!-- 地区 -->
          <el-select v-model="queryParams.city" placeholder="请选择" style="width: 196px">
            <el-option :label="item" :value="item" :key="index" v-for="(item, index) in citysArea"></el-option>
          </el-select>
        </el-form-item>

        <!-- 方向 -->
        <el-form-item label="方向：" prop="direction">
          <el-select v-model="queryParams.direction" placeholder="请选择">
            <el-option
              :label="item"
              :value="item"
              :key="index"
              v-for="(item, index) in directionOpt"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 题型 -->
        <el-form-item label="题型：" prop="questionType">
          <el-radio-group v-model="queryParams.questionType">
            <el-radio
              :label="item.value + ''"
              :key="index"
              v-for="(item, index) in questionTypeOpt"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 难度 -->
        <el-form-item label="难度：" prop="difficulty">
          <el-radio-group v-model="queryParams.difficulty">
            <el-radio
              :label="item.value + ''"
              :key="index"
              v-for="(item, index) in difficultyOpt"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 题干 富文本编辑器 -->
        <el-form-item label="题干：" prop="question">
          <quill-editor v-model="queryParams.question" :options="editorOption" />
        </el-form-item>

        <!-- 选项 -->
        <el-form-item v-if="queryParams.questionType !== '3'" label="选项:" size="small">
          <div
            :key="index"
            v-for="(item, index) in queryParams.options"
            style="padding-bottom: 20px;"
          >
            <el-checkbox
              v-if="queryParams.questionType === '2'"
              v-model="item.isRight"
              :label="true"
              style="margin-right: 0px;"
            >{{ item.code + '：' }}</el-checkbox>

            <el-radio
              v-if="queryParams.questionType === '1'"
              @change="onCodeChanged(item)"
              v-model="item.isRight"
              :label="true"
              style="margin-right: 0px;"
            >{{ item.code + '：' }}</el-radio>

            <el-input style="width: 240px;" v-model="item.title"></el-input>

            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
            >
              <span>上传图片</span>
              <i class="el-icon-circle-close"></i>
            </el-upload>
          </div>
          <el-button
            :disabled="queryParams.questionType !== '2'"
            type="danger"
            @click="onAddQuestionType"
          >+增加选项与答案</el-button>
        </el-form-item>
        <!-- 解析视频 -->
        <el-form-item label="解析视频：" prop="videoURL">
          <el-input v-model="queryParams.videoURL"></el-input>
        </el-form-item>

        <!-- 答案解析 -->
        <el-form-item label="答案解析：" prop="answer">
          <quill-editor v-model="queryParams.answer" :options="editorOption" />
        </el-form-item>

        <!-- 题目备注 -->
        <el-form-item label="题目备注：">
          <el-input style="width: 400px;" type="textarea" v-model="queryParams.remarks"></el-input>
        </el-form-item>

        <!-- 试题标签 -->
        <el-form-item label="试题标签：">
          <el-select
            v-model="queryParams.tags"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择试题标签"
          >
            <el-option
              :label="item.label"
              :value="item.label"
              :key="index"
              v-for="(item, index) in tagsOpt"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 确认提交按钮 -->
        <el-form-item>
          <el-button
            :type="$route.query.id ? 'success' : 'primary'"
            @click="onSubmit"
          >{{ $route.query.id ? '确认修改' : '确认提交' }}</el-button>
          <!-- <el-button
            :type="$route.query.id ? 'success' : 'primary'"
            @click="onSubmit"
          >{{   '确认提交' }}</el-button>-->
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 学科相关请求模块
import { simple as getSubjects } from '@/api/hmmm/subjects'
// 目录相关请求模块
import { simple as getDirectorys } from '@/api/hmmm/directorys'
// 企业相关请求模块
import { list as getCompanysList } from '@/api/hmmm/companys'
// 城市相关模块
import { provinces, citys } from '@/api/hmmm/citys'
// 试题类型、难度、方向 等相关模块
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
// 标签相关请求模块
import { simple as getTags } from '@/api/hmmm/tags'
// 题库相关请求模块
import { add as addQuestions, detail as getQuestionInfo, update } from '@/api/hmmm/questions'

// 导入富文本编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 代码高亮的插件
import 'highlight.js/styles/xcode.css'
import hljs from 'highlight.js'

import { quillEditor } from 'vue-quill-editor'
import { setItem, getItem } from '@/utils/storage'
export default {
  name: 'QuestionsNew',
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      queryParams: {
        subjectID: null, // 学科
        catalogID: null, // 目录
        enterpriseID: null, // 企业
        province: null, // 所在城市
        city: null, // 所在地区
        direction: null, // 方向
        questionType: '1', // 题型 ##字符串
        difficulty: '1', // 难度 ##字符串
        question: '', // 题干
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '', // 试题标签 ##字符串
        options: [
          {
            code: 'A', // ABCD代码
            title: '', // 标题
            img: null, // 图片URL
            isRight: false // 是否正确答案
          },
          {
            code: 'B', // ABCD代码
            title: '', // 标题
            img: null, // 图片URL
            isRight: false // 是否正确答案
          },
          {
            code: 'C', // ABCD代码
            title: '', // 标题
            img: null, // 图片URL
            isRight: false // 是否正确答案
          },
          {
            code: 'D', // ABCD代码
            title: '', // 标题
            img: null, // 图片URL
            isRight: false // 是否正确答案
          }
        ]
      },

      // 表单验证对象
      newFormRules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'change' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'change' }],
        enterpriseID: [{ required: true, message: '请选择企业', trigger: 'change' }],
        city: [{ required: true, message: '请选择城市', trigger: 'change' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'change' }],
        questionType: [{ required: true, message: '请选择题型', trigger: 'change' }],
        difficulty: [{ required: true, message: '请选择难度', trigger: 'change' }],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入答案解析', trigger: 'blur' }],
        videoURL: [{ required: true, message: '请输入解析视频', trigger: 'blur' }]
      },
      subjectsOpt: [], // 学科列表
      directorysOpt: [], // 目录列表
      companysOpt: [], // 企业列表
      provincesOpt: provinces(), // 城市列表
      citys,
      citysArea: [],
      directionOpt: direction, // 方向列表
      questionTypeOpt: questionType, // 试题类型列表
      difficultyOpt: difficulty, // 难度列表
      tagsOpt: [], // 标签列表
      // 富文本编辑器配置项
      editorOption: {
        placeholder: '请输入题干',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
            // [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: 'ordered' }, { list: 'bullet' }], //列表
            ['blockquote'], //引用，代码块
            // [{ script: 'sub' }, { script: 'super' }], // 上下标
            // [{ indent: '-1' }, { indent: '+1' }] // 缩进
            // [{ direction: 'rtl' }], // 文本方向
            // [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            // [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
            // [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            // [{ font: [] }], //字体
            // [{ align: [] }], //对齐方式
            // ['clean'], //清除字体样式
            ['code-block', 'image', 'link'] //上传图片、上传视频
          ],
          syntax: {
            highlight: (text) => {
              return hljs.highlightAuto(text).value // 这里就是代码高亮需要配置的地方
            }
          }
        }
      }
    }
  },
  async created() {
    // 获取学科列表
    this.loadSubjects()

    // 获取企业列表
    this.loadCompanysList()

    // 如果是修改页面根据ID获取题库详情
    if (this.$route.query.id) {
      // 获取存储在本地的学科ID
      const subjectID = getItem('SUBJECT_ID')
      this.loadDirectorys({ subjectID }) // 目录
      // console.log(subjectID)
      this.loadTags({ subjectID }) // 标签

      this.loadQuestionInfo() // 题库详情
    }
  },
  methods: {
    // 获取学科列表
    async loadSubjects() {
      try {
        const { data: res } = await getSubjects()
        // console.log(res)
        this.subjectsOpt = res
      } catch (error) {
        this.$message.error('获取数据失败')
      }
    },

    // 学科下拉框选中项改变时触发
    subjectChanged(subjectID) {
      this.tagsOpt = []
      this.queryParams.tags = []
      this.directorysOpt = []
      this.queryParams.catalogID = null
      // 目录列表
      this.loadDirectorys({ subjectID })

      // 标签列表
      this.loadTags({ subjectID })
    },

    // 获取二级目录
    async loadDirectorys(data) {
      try {
        const { data: res } = await getDirectorys(data)
        this.directorysOpt = res
      } catch (error) {
        console.log(error)
        this.$message.error('获取数据失败')
      }
    },

    // 获取企业列表
    async loadCompanysList() {
      try {
        const { data: res } = await getCompanysList({ pagesize: 50 })
        this.companysOpt = res.items
      } catch (error) {
        this.$message.error('获取数据失败')
      }
    },

    // 城市选择下拉框选中项发生变化时触发
    onProvincesChanged(city) {
      this.citysArea = citys(city)
      this.queryParams.city = this.citysArea[0]
    },

    // 选项下拉框选中值变化时触发
    onCodeChanged(opt) {
      this.queryParams.options.forEach((item) => {
        item.isRight = false
      })
      opt.isRight = true
    },

    // 获取标签列表
    async loadTags(data) {
      try {
        const { data: res } = await getTags(data)
        this.tagsOpt = res
      } catch (error) {
        this.$message.error('获取数据失败')
      }
    },

    // 动态添加选项与答案
    onAddQuestionType() {
      const obj = {
        // A - 69 length: 4
        // A - 70 length: 5
        // A - 71 length: 6
        // A - 72 length: 7
        // 由此得出规律 动态生成项的 字母编码 对应的是 65 + options数组的长度
        code: String.fromCharCode(65 + this.queryParams.options.length), // ABCD代码 字母 A从 65开始
        title: '', // 标题
        img: null, // 图片URL
        isRight: false // 是否正确答案
      }
      this.queryParams.options.push(obj)
    },

    // 根据ID获取题库详情
    async loadQuestionInfo() {
      // console.log(this.$route.query)
      try {
        const { data: res } = await getQuestionInfo(this.$route.query)
        // 后前台返回的options选项的isRight值是 0 1 需要转成 true 和false
        res.options.forEach((item) => {
          item.isRight = item.isRight === 0 ? false : true
        })
        // console.log(res)
        res.tags = res.tags.split(',')
        this.queryParams = res
        const { data: res2 } = await getDirectorys(this.queryParams)
        this.directorysOpt = res2
        // 将学科ID存储到本地 方便created内调用
        setItem('SUBJECT_ID', this.queryParams.subjectID)
        // console.log(this.queryParams.subjectID)
      } catch (error) {
        // console.log(error)
        this.$message.error('获取题库详情失败')
      }
    },

    // 确认提交
    onSubmit() {
      this.$refs.newFormRef.validate(async (valid) => {
        if (!valid) return this.$message.error('请输入必填项')
        const cloneData = { ...this.queryParams }
        cloneData.tags = cloneData.tags.join(',')
        try {
          if (this.$route.query.id) {
            // 修改的操作
            await update(cloneData)
          } else {
            cloneData.options.reverse()
            // 添加的操作
            await addQuestions(cloneData)
          }
          this.$message.success(`${this.$route.query.id ? '修改' : '添加'}成功`)
          this.$router.push('list')
        } catch (error) {
          console.log(error)
          this.$message.error('操作失败')
        }
      })
    }
  },
  watch: {
    // 监听路由跳转, 路由发生跳转时, 清空表单数据 并 重置表单校验
    $route: function () {
      if (this.$route.query.id) {
        this.loadQuestionInfo()
      } else {
        this.queryParams = {
          subjectID: null, // 学科
          catalogID: null, // 目录
          enterpriseID: null, // 企业
          province: null, // 所在城市
          city: null, // 所在地区
          direction: null, // 方向
          questionType: '1', // 题型 ##字符串
          difficulty: '1', // 难度 ##字符串
          question: '', // 题干
          videoURL: '', // 解析视频
          answer: '', // 答案解析
          remarks: '', // 题目备注
          tags: '', // 试题标签 ##字符串
          options: [
            {
              code: 'A', // ABCD代码
              title: '', // 标题
              img: null, // 图片URL
              isRight: false // 是否正确答案
            },
            {
              code: 'B', // ABCD代码
              title: '', // 标题
              img: null, // 图片URL
              isRight: false // 是否正确答案
            },
            {
              code: 'C', // ABCD代码
              title: '', // 标题
              img: null, // 图片URL
              isRight: false // 是否正确答案
            },
            {
              code: 'D', // ABCD代码
              title: '', // 标题
              img: null, // 图片URL
              isRight: false // 是否正确答案
            }
          ]
        }
      }

      // 需要当页面渲染完成后才去执行 重置表单的操作,
      this.$nextTick(() => {
        this.$refs.newFormRef.resetFields()
      })
    }
  },
  components: {
    quillEditor
  }
}
</script>

<style scoped lang="scss">
.questions-new {
  padding: 10px;

  .el-select,
  .el-input {
    width: 400px;
  }

  .quill-editor {
    height: 240px;
    margin-bottom: 50px;
  }

  ::v-deep .el-textarea__inner {
    min-height: 100px !important;
  }

  .avatar-uploader {
    display: inline-block;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1;
  }
  ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 100px;
    height: 60px;
    line-height: 60px;
  }

  .el-icon-circle-close {
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    background: #fff;
    font-size: 18px;
    color: #999;
  }
}
</style>
